<template>
  <div class="container">
    <div class="header-box">
      <van-row>
        <van-col span="3">
          <div class="header-item" @click="showDatePopup = true">
            <van-icon name="manager" size="25" />
          </div>
        </van-col>
        <van-col span="21">
          <div class="header-item">
            <van-field
              v-model="queryCondition.keyword"
              left-icon="search"
              @blur="keywordQuery"
              @keyup.enter.native="keywordQuery"
              :placeholder="
                active == 0
                  ? '订单号、客户名称、货物名称'
                  : '货柜编码、货柜主人、客户/货物名称'
              "
            />
          </div>
        </van-col>
      </van-row>
    </div>
    <van-tabs
      v-model="active"
      @change="changeTabs"
      color="#2c3e50"
      line-width="70px"
      duration="0.5"
    >
      <van-tab title="warehouse"></van-tab>
      <van-tab title="container"></van-tab>
      <div style="height: 5px"></div>
      <div class="tab-tools">
        <i class="iconfont icon-shuaxin filter-rest" @click="restList"></i>
        <i
          class="iconfont icon-24gf-printer filter-print"
          @click="changeSelect"
          v-if="active == 0"
        ></i>
      </div>
    </van-tabs>
    <van-list
      class="list-box"
      v-model="pageLoading"
      :finished="finished"
      finished-text="没有更多了"
      @load="scrollHandle"
    >
      <!-- 订单模板 -->
      <div v-if="active == 0">
        <div
          class="order-item"
          v-for="item in listData"
          :key="item.orderno"
          @click="selectOrder(item)"
        >
          <p class="order-header">
            <span class="item-label">Order No：</span>
            <span>{{ item.orderno }}</span>
            <span class="select-box" v-if="isSelect">
              <i
                class="iconfont icon-danxuanxuanzhong"
                v-if="selectOrderList.indexOf(item.id) >= 0"
              ></i>
            </span>
          </p>
          <div class="order-info">
            <p><span class="item-label">Cargo：</span>{{ item.goodsName }}</p>
            <p>
              <span class="item-label">Storage Area：</span>
              {{ item.area }}
            </p>
            <p>
              <span class="item-label">Storage Date ：</span>
              {{ item.warehousingTime }}
            </p>
            <p>
              <span class="item-label">Seller Phone：</span>
              {{ item.sellerPhone }}
            </p>
            <p>
              <span class="item-label">Seller Address：</span>
              {{ item.sellerAddress }}
            </p>
            <p>
              <span class="item-label">Printing Status：</span>
              <van-tag
                size="medium"
                :type="item.status == 1 ? 'warning' : 'primary'"
              >
                {{ item.status == 1 ? "未打印" : "已打印" }}
              </van-tag>
            </p>
          </div>
          <div
            class="order-link"
            v-if="!isSelect"
            @click="orderInfo(item.orderno)"
          >
            <span>Order Info</span>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <!-- 货柜模板 -->
      <div v-if="active == 1">
        <div class="order-item" v-for="(item, index) in listData" :key="index">
          <p class="order-header">
            <span class="item-label">code：</span>
            {{ item.code }}
          </p>
          <div class="order-info">
            <p>
              <span class="item-label">lock code：</span>
              {{ item.lockCode }}
            </p>
            <p>
              <span class="item-label">total cargo：</span>
              {{ item.totalNum }}
            </p>
            <p>
              <span class="item-label">total volume：</span>
              {{ item.totalSize }}
            </p>
            <p>
              <span class="item-label">total package：</span>
              {{ item.totalPackage }}
            </p>
            <p>
              <span class="item-label">container owner：</span>
              {{ item.master }}
            </p>
            <p>
              <span class="item-label">container owner's phone：</span>
              {{ item.masterPhone }}
            </p>
          </div>
          <div class="order-link" v-if="!isSelect" @click="counterInfo(item)">
            <span>Container Info</span>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </van-list>
    <div class="list-bottom"></div>
    <div class="print-box" v-if="isSelect && active == 0">
      <van-button type="info" size="large" @click="print"
        >打印选中订单</van-button
      >
    </div>
    <van-popup
      v-model="showDatePopup"
      position="left"
      :style="{ height: '100%', width: '70%' }"
      class="user-info-box"
    >
      <van-cell-group>
        <div class="user-info-item">
          <van-icon name="manager" size="18px" />
          <span>{{ userInfo.nickname }}</span>
        </div>
        <div class="user-info-item">
          <van-icon name="column" size="18px" />
          <span>{{ userInfo.username }}</span>
        </div>
        <van-button block round type="info" class="login-out" @click="logout">
          Log out
        </van-button>
      </van-cell-group>
    </van-popup>
    <!-- 页面加载 -->
    <div class="page-loading" v-if="contentLoading">
      <van-loading color="#1989fa" text-color="#1989fa" vertical>
        加载中...
      </van-loading>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { findOrderList, printOrder, findCounterList } from "@/api/manager";
import { List, Search, Dialog, Toast } from "vant";

@Component({
  components: {
    List,
    Search,
    Dialog,
  },
})
export default class ManagerIndex extends Vue {
  private userInfo = JSON.parse(
    JSON.parse(JSON.stringify(localStorage.getItem("managerInfo")))
  );
  private showDatePopup = false;
  private pageLoading = false;
  private contentLoading = this.pageLoading;
  private finished = false;
  private listData = [];
  // 是否进入选择模式
  private isSelect = false;
  // 总条数
  private total = 0;
  // 数据
  private queryCondition: any = {
    keyword: "",
    pageNum: 1,
    pageSize: 10,
  };
  private active = 0;
  // 选中订单
  private selectOrderList: any = [];
  // 获取订单列表
  private async getOrderList(): Promise<void> {
    try {
      this.pageLoading = true;
      const data = await findOrderList(this.queryCondition);
      this.listData = this.listData.concat((data as any).rows);
      this.total = (data as any).total;
      this.pageLoading = false;
    } catch (e) {
      this.total = 0;
      this.pageLoading = false;
    }
  }
  // 获取货柜列表
  private async getCustomerCounter(): Promise<void> {
    try {
      this.pageLoading = true;
      const data = await findCounterList(this.queryCondition);
      this.listData = this.listData.concat((data as any).rows);
      this.total = (data as any).total;
      this.pageLoading = false;
    } catch (e) {
      this.total = 0;
      this.pageLoading = false;
    }
  }
  // 切换tabs
  private async changeTabs(val: any): Promise<void> {
    this.queryCondition.pageNum = 1;
    this.queryCondition.keyword = "";
    this.listData = [];
    if (val == 1) {
      await this.getCustomerCounter();
    } else {
      await this.getOrderList();
    }
  }
  // 生命钩子
  private async created(): Promise<void> {
    await this.getOrderList();
  }
  // 容器触底
  private scrollHandle(): void {
    if (this.listData.length < this.total) {
      this.queryCondition.pageNum++;
      if (this.active == 1) {
        this.getCustomerCounter();
      } else {
        this.getOrderList();
      }
    } else {
      Toast("没有更多了");
      this.finished = true;
    }
  }
  // 关键词搜索
  private keywordQuery(): void {
    this.queryCondition.keyword = this.queryCondition.keyword.trim();
    this.queryCondition.pageNum = 1;
    this.listData = [];
    if (this.active == 0) {
      this.getOrderList();
    } else {
      this.getCustomerCounter();
    }
  }
  // 选择打印订单
  private selectOrder(val: any): void {
    if (this.isSelect) {
      this.selectOrderItem(val.id);
    }
  }
  // 订单详情
  private orderInfo(val: any): void {
    this.$router.push("/order-info?orderNo=" + (val + ""));
  }
  // 货柜下班过去
  private counterInfo(val: any): void {
    this.$router.push("/counter-info?id=" + val.id);
  }
  // 操作选中订单
  private selectOrderItem(val: any): void {
    const index = this.selectOrderList.indexOf(val);
    if (index < 0) {
      this.selectOrderList.push(val);
    } else {
      this.selectOrderList = this.selectOrderList.filter(
        (item: any) => item != val
      );
    }
  }
  // 刷新
  private restList(): void {
    this.selectOrderList = [];
    this.isSelect = false;
    this.listData = [];
    this.queryCondition.keyword = "";
    this.queryCondition.pageNum = 1;
    if (this.active == 0) {
      this.getOrderList();
    } else {
      this.getCustomerCounter();
    }
  }
  // 切换打印状态
  private changeSelect(): void {
    this.selectOrderList = [];
    this.isSelect = !this.isSelect;
  }
  // 打印订单
  private async print(): Promise<void> {
    if (this.selectOrderList.length == 0) {
      Toast("至少选中一条数据");
      return;
    }
    try {
      this.contentLoading = true;
      await printOrder(this.selectOrderList);
      this.contentLoading = false;
      this.restList();
      Toast("已加入打印队列");
    } catch (e) {
      this.pageLoading = false;
    }
  }
  // 退出登录
  private logout(): void {
    Dialog.confirm({
      title: "warn",
      message: "Log out？",
      confirmButtonText: "OK",
      cancelButtonText: "cancel",
    })
      .then(() => {
        window.localStorage.removeItem("managerInfo");
        window.localStorage.removeItem("manager-token");
        this.$router.push("/");
      })
      .catch(() => {
        // on cancel
      });
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  .page-loading {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .print-box {
    width: 100%;
    height: 55px;
    background: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-box-shadow: 0px 0px 5px #adadad;
    -webkit-box-shadow: 0px 0px 5px #adadad;
    box-shadow: 0px 0px 5px #adadad;
    ::v-deep .van-button--large {
      height: 55px !important;
    }
  }
  .user-info-box {
    border: none !important;
    box-sizing: border-box;
    padding: 0 10px 0 10px;
    .van-cell-group {
      position: relative;
      height: 100% !important;
    }
    .user-info-item {
      width: 100%;
      height: 55px;
      display: flex;
      align-items: center;
      border-bottom: 1px #f5f5f5 solid;
      .van-icon {
        margin-right: 5px;
      }
    }
    .login-out {
      position: absolute;
      bottom: 35px;
    }
  }
  ::v-deep .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0 !important;
  }
  .header-box {
    width: 100%;
    height: 55px;
    .header-item {
      width: 100%;
      height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      .van-field {
        border-bottom: 1px #f5f5f5 solid;
      }
      ::v-deep .van-icon-search {
        font-size: 20px !important;
        padding-right: 5px;
      }
      ::v-deep .van-field__control {
        font-size: 15px;
      }
    }
  }
  .tab-tools {
    height: 49px;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    .filter-print,
    .filter-rest {
      width: 40px;
      height: 49px;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
      color: #5c5c66 !important;
    }
  }
  .tabs-box {
    width: 100%;
    height: 40px;
    border-bottom: 1px red solid;
  }
  ::v-deep .van-tabs--line .van-tabs__wrap {
    padding-left: 10px !important;
  }
  ::v-deep .van-tab--active {
    font-weight: 600;
  }
  ::v-deep .van-tab {
    font-size: 16px !important;
    margin-right: 10px !important;
  }
  ::v-deep .van-tabs {
    box-sizing: border-box;
    padding: 0px 10px !important;
  }
  ::v-deep .van-tab {
    flex: none !important;
  }
  .filter-date-box {
    height: 45%;
    .keyword-box {
      width: 100%;
      height: 20px;
      border: 1px red solid;
    }
  }
  .list-box {
    height: calc(100% / 1 - 104px);
    box-sizing: border-box;
    padding: 0px 10px !important;
    background-color: #e3e3e3;
    overflow-y: auto;
    .order-item {
      width: 100%;
      margin-top: 10px;
      background-color: #ffffff;
      border-radius: 5px;
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
        0 2px 4px 0 rgba(232, 237, 250, 0.5);
      .item-label {
        font-weight: 600;
      }
      .order-header {
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 10px;
        border-bottom: 1px #dcdcdc solid;
        position: relative;
        .select-box {
          display: block;
          position: absolute;
          right: 5px;
          top: 7px;
          width: 25px;
          height: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px #dcdcdc solid;
          border-radius: 50%;
          .iconfont {
            font-size: 25px;
          }
        }
      }
      .order-info {
        width: 100%;
        box-sizing: border-box;
        padding: 5px 10px !important;
        p {
          line-height: 30px;
        }
      }
      .order-link {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-right: 10px;
        justify-content: flex-end;
        border-top: 1px #dcdcdc solid;
        font-size: 15px;
        font-weight: 600;
      }
    }
  }
  .list-bottom {
    width: 100%;
    height: 55px;
  }
}
</style>
